<template>
    <div class="queList" @click="toQuestion(queList)">
        <div class="weui-cell ques">
            <div class="weui-cell__hd">
                <div  class="thumb">
                    <!-- <img :src="queList.thumb" alt="" lazy-load="true" > -->
                    <imgLoad 
                     defaultImage='/static/images/z.png'
                     :originalImage='queList.thumb' 
                     width="250rpx"
                     height="150rpx"
                  />
                    <img src="/static/images/fx.png" alt=""  class="fxRed" v-if="queList.reword>0" >  
                </div>
            </div>
            <div class="weui-cell__bd">
                <p class="content"><span>Q：</span>{{queList.questions}}</p>
            </div>
            <div class="weui__ft price" v-if="queList.reword>0">
                <span>{{queList.reword}}</span>
                <div>悬赏金额</div>
                <report :info="queList" type="1" model="1" v-if="isother"></report>
            </div>
        </div>
        <div class="weui-cell" v-if="isOperate">
             <div class="weui-cell__bd">
                  <operate :info="queList" iszan="true" isshare="true" iscomt="true"></operate>
             </div>
             <div class="weui-cell__ft time"  v-if="type!=2">
                 {{queList.created_at}}
             </div>
        </div>
    </div>
</template>

<script>
import operate from "@/components/operate";
import report from "@/components/report";
import imgLoad from "@/components/imgLoad";
export default {
    props: ["queList","type","isOperate","isother"],
    components: {
       imgLoad,
       operate,
       report,
       
   },
    methods:{
        toQuestion(info){
            let url="../questionDetail/main?id="+info.id+"&keType="+info.article_type;
            mpvue.navigateTo({url})
        },
        toAnswer(){
            let url="../writeAnswer/main"
            mpvue.navigateTo({url})
        },
        like(e){
           let liked=e.currentTarget.dataset.like;
           let idx=e.currentTarget.dataset.idx;
           this.$emit("click",{liked,idx})
        }
    }
}
</script>
<style lang="scss" >
  .queList .operate{
      text-align:left;
  }
</style>
<style lang="scss">
    .queList{
        border-bottom:5px solid #F4F5F5;
        .ques{
            padding:15px;
            position:relative;
            &::after{
               content:"";
               position:absolute;
               left:15px;
               right:15px;
               bottom:0;
               border-bottom:1px solid #ddd;
            }
        }
        .thumb{
            width:125px;
            height:75px;
            display:block;
            margin-right:6px;
            position: relative;
            img{
                width:125px;
                height:75px;
                display:block;
            }
            .fxRed{
                position: absolute;
                top: 5px;
                left: 5px;
                width:27px;
                height:29px;
                display: block;
            }
        } 
        .content{
            font-size:14px;
            font-weight:bold;
            color:#333;
            line-height:18px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            span{
                color: #E9B55E;
            }
        }
        .price{
            text-align:center;
            font-size:12px;
            font-weight:500;
            color:rgba(26,132,251,1);
            line-height:18px;
            span{
                font-size:15px;
                font-weight:bold;
                color:rgba(26,132,251,1);
                line-height:18px;
            }
        } 
        .time{
            color:rgba(102,102,102,1);
            line-height:18px;
            font-size:11px;
        }
        .operat{
            font-size:14px;
            font-weight:500;
            line-height:1;
            img{
                width:16px;
                height:14px;
                display:inline-block;
                vertical-align:middle;
            }
        }
    }
</style>
